<template>
	<view>
		<!-- 顶部导航 -->
		<uni-nav-bar 
			background-color="#e32519" 
			color="#fff" 
			status-bar="true"
			
			fixed="true"
			@clickLeft="clickNavLeft()"
			@clickRight="clickNavRight()">
			<!-- 导航栏左侧插槽 -->
			<view slot="left" style="display: flex;justify-content: space-between;">
				<image style="width: 110rpx;height: 50rpx;" src="../../static/xuexi.png"></image>
				
			</view>
			<!-- 搜索框 -->
			<u-search height="50rpx"  placeholder="每日科普" placeholderColor="#eceae9"  bgColor="#ec857b" :animation="true" searchIconColor="#eceae9" ></u-search>
			
			<!-- 右侧插槽 -->
			<!-- <view style="width: 25%; margin-left: 30rpx;display: flex ;justify-content:space-between;">
				<view style="font-size: 8px;padding-top: 14rpx;">积分</view>
				<view style="padding: 22rpx 0 0 12rpx;font-size: 20px;">1253</view>
				
			</view> -->
			<view slot="right" ><text style="font-size: 16px;">我的</text></view>
		</uni-nav-bar>
		
		<!-- 滚动条 -->
		<u-tabs style="width:100%; background-color: #ffeee6;position:fixed;z-index: 1;" lineColor="red" lineWidth="25"
			lineHeight="2" activeStyle="color:red;" :list="tabList" @click="click"></u-tabs>
		
		
		
		
		<!-- 底部自定义导航-->
		<u-tabbar :value="value4" @change="name => value4 = name" :fixed="true" :placeholder="true"
			activeColor="#d81e06" :safeAreaInsetBottom="true" >
			<!-- 强国通 -->
			<u-tabbar-item text="强国通"  badge="3" @click="go1(text)">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/qgt2.png">
				</image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/qgt.png"></image>
			</u-tabbar-item>
			<!-- 百灵 -->
			<u-tabbar-item text="百灵" @click="go2()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/bl2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/bl.png"></image>
			</u-tabbar-item>
			<!-- 中间图标 -->
			<u-tabbar-item @click="go3()">
				<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../../static/tab.png"></image>
				<image style="width: 80rpx;height: 80rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tab_select.png"></image>
			</u-tabbar-item>
			<!-- 电视台 -->
			<u-tabbar-item text="电视台" @click="go4()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dst2.png">
				</image>
				<image style="width: 40rpx;height:40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dst.png"></image>
			</u-tabbar-item>
			<!-- 电台 -->
			<u-tabbar-item text="电台" @click="go5()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dt2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dt.png"></image>
			</u-tabbar-item>
		</u-tabbar>	
		
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				value4: 4,
				tabList: [{
						id: "tab01",
						name: '听同期声'
					},
					{
						id: "tab02",
						name: '听原著'
					},
					{
						id: "tab03",
						name: '强国之声'
					},
					{
						id: "tab04",
						name: '听广播'
					},
					{
						id: "tab05",
						name: '听新闻报摘'
					},
					{
						id: "tab06",
						name: '听理论'
					},
					{
						id: "tab07",
						name: '云听'
					},
					{
						id: "tab08",
						name: '听文化'
					},
					{
						id: "tab09",
						name: '听健康'
					},
					{
						id: "tab10",
						name: '听乡村大喇叭'
					},
					{
						id: "tab11",
						name: '中唱之声'
					}
				],
				
			}
		},
		methods: {
			go1() {
				uni.navigateTo({
					url:"../qgt/qgt"
				})
			},
			go2() {
				uni.navigateTo({
					url:"../bl/bl"
				})
				
			},
			go3() {
				uni.navigateTo({
					url:"../xuexi/xuexi"
				})
			},
			go4() {
				uni.navigateTo({
					url:"../dst/dst"
				})
			},
			go5() {
				uni.navigateTo({
					url:"../dt/dt"
				})
			}
		}
	}
</script>

<style>

</style>
